import companyLogo from "@/assets/image/companyLogo.png";
import useTranslations from "@/hooks/useTranslations";
import { Space } from "antd";
import { useMediaQuery } from "react-responsive";
import { Link } from "umi";
import "./index.less";

export default function Footer() {
  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
  const $t = useTranslations();
  return (
    <div className={`footer ${isMobile ? "footer-mobile" : "footer-desktop"}`}>
      <div className="footer-content">
        <div className="footer-logo">
          <img src={companyLogo} alt="Company Logo" />
        </div>
        <div className="footer-nav">
          <div className="footer-text-content">
            <div className="footer-links">
              <Space size={isMobile ? "small" : "large"}>
                <Link to={"./"}>{$t("Parking")}</Link>
                <Link to={"./"}>{$t("FAQs")}</Link>
                <Link to={"./"}>{$t("Contact Us")}</Link>
              </Space>
            </div>
            <div className="footer-text">
              <div>© Airport Authority Hong Kong. All Rights Reserved.</div>
              <div>
                <Space size={isMobile ? "small" : "middle"}>
                  <Link to={"./"}>{$t("Privacy Policy")}</Link>
                  <Link to={"./terms"}>{$t("Terms of Use")}</Link>
                </Space>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
